<template>
    <div class="box">
        <SearchContent :queryParams="queryParams1" @query="handleQuery1" @reset="resetQuery1" labelWidth="80px">
            <el-col :span="12">
                <el-form-item label="用户账号:" prop="userName">
                    <el-input v-model="queryParams1.userName" clearable placeholder="请输入用户账号"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="用户姓名:" prop="nickName">
                    <el-input v-model="queryParams1.nickName" clearable placeholder="请输入用户姓名"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="组织名称:" prop="deptName">
                    <el-input v-model="queryParams1.deptName" clearable placeholder="请输入组织名称"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="岗位:" prop="postName">
                    <el-input v-model="queryParams1.postName" clearable placeholder="请输入岗位"></el-input>
                </el-form-item>
            </el-col>
        </SearchContent>
        <p class="change_num">已选中{{ selectNum }}人</p>
        <el-table  :row-key="(row) => row.userId" ref="multipleTable1"  :data="allDataList1"   border style="margin-bottom: 30px;">  
                <el-table-column label="用户账户" align="center" prop="userName"
                    show-overflow-tooltip />
                <el-table-column label="用户姓名" align="center" prop="nickName" 
                    show-overflow-tooltip />
                <el-table-column label="组织名称" align="center" prop="deptName" 
                    show-overflow-tooltip />
                <el-table-column label="岗位" align="center" prop="postName" 
                    show-overflow-tooltip />
                <el-table-column label="手机号码" align="center" prop="phonenumber" 
                    show-overflow-tooltip />   
        </el-table>    
    </div>
</template>
<script>
import SearchContent from "@/components/SearchContent/index.vue";
import * as apis from "@/api/messageManagement/index.js";
import { create } from "lodash";
    export default{
        name:'NoticeSeeModle',
        components: {
            SearchContent,
        },
        props:{
            info:{
                type: Array,
                default: () => [], 
            }
        },
        data(){
            return{
                queryParams1:{
                    userName:'',
                    nickName:'',
                    deptName:'',
                    postName:'',
                },
                // 选中所有数据
                allDataList1:[],
                //暂存选中数据
                list1:[],
                olderList:[],
                selectNum:0,
            }
        },
        mounted(){
            this.getList()
        },
        methods:{
            handleQuery1(){
                this.olderList = JSON.parse(JSON.stringify(this.allDataList1))
                const obj ={
                    userName:this.queryParams1.userName,
                    nickName:this.queryParams1.nickName,
                    deptName:this.queryParams1.deptName,
                    postName:this.queryParams1.postName,
                }
                let arr = JSON.parse(JSON.stringify(this.allDataList1))
                for (const item in obj) {
                    arr = arr.filter((row) =>{ 
                        return obj[item]?row[item].includes(obj[item]):true;
                    })
                    this.allDataList1 = arr
                } 
            },
            resetQuery1(){
                this.queryParams1={
                    userName:'',
                    nickName:'',
                    deptName:'',
                    postName:'',
                }
                this.allDataList1 = this.olderList
            },
            // 获取人员
            getList(){
                apis.getNoticePersion(this.queryParams).then((res)=>{
                    if(res.code==200){
                        this.allDataList = res.data
                        // 回显选中的人员
                        console.log(this.info,111111)
                        if(this.info){
                            this.info.map((res1)=>{
                                res.data.map((item)=>{
                                    if(res1==item.userId){
                                        this.allDataList1.push(item)
                                    }
                                    this.selectNum = this.allDataList1.length
                                })
                                
                            })
                        }
                    }
                })
            },
        },
    }
</script>
<style scoped>
.change_num{
    font-weight:bold;
}
</style>